<template>
  <div class="pages">
    <div class="content">
      <div class="notice">
        <div class="notice-content">
          <div
            class="notice-item"
            @click="goPage(item.id)"
            v-for="(item, key) in state.dataList"
            :key="key"
          >
            <div class="title">{{ item.title }}</div>
            <div class="time">{{ item.publishTime }}</div>
          </div>
        </div>
        <div class="pagination">
          <Pagination
            v-bind="state.pagination"
            @current-change="currentChangeHandle"
            @size-change="sizeChangeHandle"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 定义表格查询、后台调用的API
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: useApi().app.getNotice,
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle } = useTable(state);
const goPage = (id: string) => {
  navigateTo({
    path: "/notice/details",
    query: { id: id },
  });
};
</script>

<style lang="scss" scoped>
.pages {
  padding-top: 40px;
  padding-bottom: 106px;
  box-sizing: border-box;
  background: #fafafa;
}
.mbx {
  margin-bottom: 25px;

  p {
    font-weight: 400;
    font-size: 16px;
    color: #6c6e75;

    span {
      font-weight: 600;
      font-size: 18px;
      color: #000000;
      margin-left: 6px;
    }
  }
}

.notice {
  width: 1200px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #d0e3ff;
  padding: 0 20px;

  .notice-content {
    min-height: 700px;
  }

  .notice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 25px;
    padding-top: 25px;
    cursor: pointer;

    .title {
      width: 397px;
      font-weight: 500;
      font-size: 20px;
      color: #1a2a4e;
    }

    .time {
      font-weight: 400;
      font-size: 14px;
      color: #6c6e75;
    }
  }
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
